<html>
<head>
    {% load static %}
    <script type="text/javascript" src="{% static 'echart/echarts.js' %}"/>
    <script></script>
    <title>数据加载更新实例</title>

</head>
<body>
<div id="mychart" style="width: 600px;height:400px;"></div>

</body>
<script>
        var myChart=echarts.init(document.getElementById('mychart'));

        var base = +new Date(2014, 9, 3);

        var oneDay = 24 * 3600 * 1000;

        var date = [];

        var data = [Math.random() * 150];

        var now = new Date(base);

        function addData(shift) {

            now = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/');

            date.push(now);

            data.push((Math.random() - 0.4) * 10 + data[data.length - 1]);

            if (shift) {

                date.shift();

                data.shift();

            }

            now = new Date(+new Date(now) + oneDay);

        }

        for (var i = 1; i < 100; i++) {

            addData();

        }

        option = {
            legend:{data:['数据加载更新实例']},
            xAxis: {

                type: 'category',

                boundaryGap: false,

                data: date

            },

            yAxis: {

                boundaryGap: [0, '50%'],

                type: 'value'

            },

            series: [

                {

                    type:'line',

                    smooth:true,

                    symbol: 'none',

                    stack: 'a',

                    areaStyle: {

                        normal: {}

                    },

                    data: data

                }

            ]

        };

        //设置初始数据
        myChart.setOption(option);

        setInterval(function () {

            addData(true);

            //更新数据
            myChart.setOption({

                xAxis: {

                    data: date

                },

                series: [{

                    name:'数据加载更新实例',

                    data: data

                }]

            });

        }, 500);
    </script>
</html>